<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show" id="integralOrder">

        <div class="layui-tab" id="integralOrderStatusTab" lay-filter="integralOrderStatusTab">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li>待支付</li>
                <li>已支付</li>
            </ul>
        </div>
        <label class="layui-form-label">订单编号:</label>
        <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
            <input type="text" id="integralOrderNumber" placeholder="请输入订单编号" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" id="integralOrderSearch">搜索</button>
        </div>
        <table class="layui-hide" lay-filter="integralOrderTable" id="integralOrderTable"></table>
    </div>
</div>


<script th:replace="/common/template :: script"></script>
<script th:inline="javascript">
    layui.use(['element', 'table', 'form', 'jquery'], function () {
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;
        var status;
        table.render({
            elem: '#integralOrderTable'
            , id: 'integralOrderTable'
            , url: '/integralOrder'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                 {field: 'orderNumber', title: '订单编号', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'userName', title: '用户名', align: 'center'}
                , {field: 'integralUseCount', title: '实付积分', align: 'center'}
                , {field: 'orderMoney', title: '金额', align: 'center'}
                , {field: 'orderTime', title: '下单时间', align: 'center'}
                , {field: 'payTime', title: '支付时间', align: 'center'}
                , {
                    field: 'orderStatus', title: '状态', align: 'center', templet: function (d) {
                        var str = '';
                        var status = d.orderStatus;
                        if (status == 0) {
                            str = "<div>待支付</div>"
                        } else if (status == 1) {
                            str = "<div>已支付</div>"
                        }
                        return str;
                    }
                }
            ]]
            , page: true
        });
        $('#integralOrderSearch').click(function () {
            var name = $('#integralOrderNumber').val();
            table.reload('integralOrderTable', {where: {orderNumber: name, status: status}})
        })
        element.on('tab(integralOrderStatusTab)', function (data) {
            if (data.index == 0) {
                status = null;
            } else if (data.index == 1) {
                status = 0;
            } else if (data.index == 2) {
                status = 1;
            }
            table.reload('integralOrderTable', {where: {status: status}})
        });
    })
</script>
</body>
</html>
